<template>
	<view class="container">
		<!-- 原生视频组件，层级最高 -->
		<video id="myVideo" src="/static/1.mp4" class="video-player"></video>

		<!-- 整个覆盖层：使用 cover-view -->
		<!-- 注意：这个 cover-view 是 video 组件的“兄弟”节点，通过绝对定位覆盖上去 -->
		<!-- （根据平台差异，有时也需要作为子节点） -->
		<cover-view class="overlay-panel">
			<!-- 1. 可点击的关闭按钮 (使用 click 事件) -->
			<cover-view class="close-button" @click="handleClosePanel">X</cover-view>

			<!-- 2. 评论区标题 (文本必须用 cover-view 包裹) -->
			<cover-view class="comment-title">精彩评论</cover-view>

			<!-- 3. 可滚动的评论列表 (使用 scroll-top 属性) -->
			<cover-view class="comment-list-container" :scroll-top="scrollTopValue">
				<!-- 循环渲染评论 -->
				<cover-view v-for="comment in comments" :key="comment.id" class="comment-item">
					<cover-view class="comment-author">{{ comment.author }}:</cover-view>
					<cover-view class="comment-content">{{ comment.text }}</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>

		<!-- 外部控制按钮 -->
		<button @click="scrollToTop">评论返回顶部</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollTopValue: 0, // 控制滚动位置
			comments: [
				{ id: 1, author: '追风的少年', text: '这个视频太治愈了，一天的疲惫都消失了，感谢UP主！' },
				{ id: 2, author: '代码搬运工', text: '求BGM！跪求背景音乐！真的太好听了，已经单曲循环了！' },
				{ id: 3, author: '吃瓜群众一枚', text: '前排出售瓜子、花生、矿泉水~' },
				{ id: 4, author: '深蓝的海洋', text: '这个地方是哪里啊？风景太美了，好像世外桃源，好想去旅游！' },
				{ id: 5, author: 'JustDoIt', text: '666' },
				{ id: 6, author: '一个路人甲', text: '让我想起了我的大学时光，青涩又美好，满满的回忆。' },
				{ id: 7, author: '前端即未来', text: '这个转场效果是怎么做的？太丝滑了！用的是什么剪辑软件？AE还是PR？' },
				{ id: 8, author: '爱吃火锅的猫', text: '哈哈哈，看到一半笑出声了，UP主太有梗了！' },
				{ id: 9, author: '隔壁老王', text: '已三连，下次还来！' },
				{ id: 10, author: '永不放弃', text: '虽然只是一个简单的视频，但能感受到作者对生活的热爱，给了我很多力量。' },
				{ id: 11, author: '小透明_123', text: '没有人发现1分23秒那个小细节吗？作者用心了。' },
				{ id: 12, author: 'Java是神', text: '这个画质，这个调色，简直是电影级别的享受。👍👍👍' },
				{ id: 13, author: '奋斗的小青年', text: '标记一下，等我忙完这个项目就去这个地方打卡！' },
				{ id: 14, author: '月下独酌', text: '为什么我的眼里常含泪水？因为我对这土地爱得深沉……' },
				{ id: 15, author: '摸鱼大师', text: '工作时间摸鱼看到这个，心情瞬间好了，谢谢你，陌生人。' },
				{ id: 16, author: '芝士就是力量', text: '哇！这运镜太稳了，用的什么设备拍的？是无人机吗？' },
				{ id: 17, author: '今天学习了吗', text: '一条评论，证明我来过。' },
				{ id: 18, author: '不想加班', text: '只有我一个人觉得这个视频的节奏有点慢吗？不过内容还是很棒的。' },
				{ id: 19, author: '奶茶续命', text: '视频内容引起极度舒适，建议反复观看。' },
				{ id: 20, author: '用户7823490', text: '我也是！我也是这么想的！终于找到组织了！' },
				{ id: 21, author: '我叫不高兴', text: '本来心情不好，看完视频，感觉好像也没什么大不了的了。' },
				{ id: 22, author: '夏天的风', text: '这简直就是我的梦中情景！好想生活在这样的地方。' },
				{ id: 23, author: '键盘侠客', text: '从技术角度分析，这个视频的构图、光影和后期都堪称完美。学习了！' },
				{ id: 24, author: '爱睡觉的猪', text: '太晚了，明天再看一遍。先留个爪。' },
				{ id: 25, author: '今天我生日', text: '今天我生日，能得到大家的祝福吗？视频很棒，就当是送我的礼物啦！' }
			]
		};
	},
	methods: {
		handleClosePanel() {
			console.log('面板被关闭了！');
			// 在这里添加隐藏面板的逻辑
		},
		scrollToTop() {
			// 关键点：通过改变绑定到 scroll-top 的变量来控制滚动
			// 为了确保能触发滚动，我们可以在0和1之间切换
			this.scrollTopValue = Math.random(); // 设为0可能不会重复触发，用随机数或新旧值判断来确保更新
			console.log('命令评论区滚动到顶部！');
		}
	}
};
</script>

<style>
.video-player {
	width: 100%;
}
.overlay-panel {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 250px;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10; /* 确保在其他非原生组件之上 */
}
.close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	color: white;
	padding: 5px;
	border: 1px solid white;
}
.comment-title {
	color: white;
	text-align: center;
	padding: 10px;
}
/* 关键样式：让 cover-view 成为可滚动容器 */
.comment-list-container {
	height: 180px; /* 必须有固定高度 */
	overflow-y: scroll; /* 必须设置 overflow-y: scroll */
	-webkit-overflow-scrolling: touch; /* 优化iOS滚动体验 */
}
.comment-item {
	padding: 8px;
	border-bottom: 1px solid #555;
}
/* 文本样式 */
.comment-author,
.comment-content {
	color: white;
	line-height: 1.5; /* cover-view 内样式支持有限，但基础的都支持 */
}
</style>
